// 导入默认图片
import defaultImg from "@/assets/lazy.gif";
import { useIntersectionObserver } from "@vueuse/core";
import { App } from "vue";

export default function (app: App) {
  app.directive("lazyImg", {
    mounted(el, binding) {
      // el:img dom对象
      // binding.value  图片url地址
      // 使用 vueuse/core 提供的监听 api 对图片 dom 进行监听 正式进入视口才加载
      const { stop } = useIntersectionObserver(
        el,
        ([{ isIntersecting }], observerElement) => {
          // 进入可视容器
          if (isIntersecting) {
            
            // 指定src => 浏览会自动加载图片
            el.src = binding.value;
            // 绑定加载失败监听, 用于失败时显示默认图片
            el.onerror = function () {
              el.src = defaultImg;
            };
            stop();
          }
        }
      );
    },
  });
}

